<template>
	<div class="channelCooperation">
		<div class="banner">
			<h1>智加云代理商火热招募中</h1>
			<p>与代理商伙伴建立共赢发展模式</p>
			<span @click="handleClick">申请成为代理商</span>
		</div>
		<div class="container">
			<div class="con con1">
				<h2>加盟流程</h2>
				<div class="box1">
					<div class="dashed"></div>
					<div class="process">
						<div class="item">
							<img src="./img/qdhz-jmlc1@3x.png" alt="">
							<span>提交申请</span>
						</div>
						<div class="item">
							<img src="./img/qdhz-jmlc2@3x.png" alt="">
							<span>商务洽谈</span>
						</div>
						<div class="item">
							<img src="./img/qdhz-jmlc3@3x.png" alt="">
							<span>商务考察</span>
						</div>
						<div class="item">
							<img src="./img/qdhz-jmlc4@3x.png" alt="">
							<span>综合评审</span>
						</div>
						<div class="item">
							<img src="./img/qdhz-jmlc5@3x.png" alt="">
							<span>团队建设</span>
						</div>
						<div class="item">
							<img src="./img/qdhz-jmlc6@3x.png" alt="">
							<span>开业庆典</span>
						</div>
					</div>
				</div>
			</div>
			<div class="con con2">
				<h2>代理商扶持计划</h2>
				<div class="box2" ref="box2">
					<div class="agency-list" ref="agencyList">
						<div class="item" v-for="(item, index) in agencyList" :key="index">
							<img :src="item.imgUrl" alt="">
							<h3>{{item.title}}</h3>
							<p>{{item.desc}}</p>
						</div>
					</div>
				</div>
			</div>
			<div class="con con3">
				<h2>技术优势</h2>
				<div class="box3" ref="box3">
					<div class="jishu-list" ref="jishuList">
						<div class="item" v-for="(item, index) in jishuList" :key="index">
							<img :src="item.imgUrl" alt="">
							<h3 v-html="item.title"></h3>
						</div>
					</div>
				</div>
			</div>
			<div class="con con4">
				<h2>智加云渠道介绍</h2>
				<div class="box4">
					<p>智加云渠道是智加云发展的核心力量，整体渠道结构由渠道招商、运营、技术支持、客服、培训以及数据管理六大核心部门组成。</p>
					<p> “一群人，一件事，一起拼， 一起赢”是智加云的渠道精神，渠道致力于寻找一群志同道合的创业伙伴，以合伙人的形式去扶持代理商共同成长，协助代理商快速成长为当地最具影响力的移动互联网公司，实现你们的创业梦想。</p>
       				<p>秉承务实 创新 利他的发展理念，和您携手同行！</p>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	import BScroll from 'better-scroll';
	export default {
		name: 'channelCooperation',
		data(){
			return {
				agencyList: [
					{
						imgUrl: require('./img/qdhz-dlfc1@3x.png'),
						title: '高返点',
						desc: '高额返点优惠辅助代理商更好的发展公司，拓展当地市场'
					},
					{
						imgUrl: require('./img/qdhz-dlfc2@3x.png'),
						title: '产品支持',
						desc: '提供完善的全行业营销解决方案，根据市场需求产品快速迭代'
					},
					{
						imgUrl: require('./img/qdhz-dlfc3@3x.png'),
						title: '培训支持',
						desc: '定期针对代理商人员的需求进行相关培训支持'
					},
					{
						imgUrl: require('./img/qdhz-dlfc4@3x.png'),
						title: '销售工具',
						desc: '提供专业化的crm代理商业务管理系统，帮助提高工作效率'
					},
					{
						imgUrl: require('./img/qdhz-dlfc5@3x.png'),
						title: '资源支持',
						desc: '总部通过网络推广得到的资源全部转交给当地代理商'
					},
					{
						imgUrl: require('./img/qdhz-dlfc6@3x.png'),
						title: '技术支持',
						desc: '提供在线技术服务，保障问题高效、快速的解决'
					},
					{
						imgUrl: require('./img/qdhz-dlfc7@3x.png'),
						title: '售后客服',
						desc: '全方位协助代理商打造售后团队，提供客户运营支持'
					},
					{
						imgUrl: require('./img/qdhz-dlfc8@3x.png'),
						title: '技术保障',
						desc: '强大的研发团队保障系统的安全性、稳定性、可靠性'
					},
					{
						imgUrl: require('./img/qdhz-dlfc9@3x.png'),
						title: '区域保护',
						desc: '不允许代理商跨区域销售确保代理商的利益最大化'
					}
				],
				jishuList: [
					{
						imgUrl: require('./img/qdhz-pk1@3x.png'),
						title: '人工智能营销'
					},
					{
						imgUrl: require('./img/qdhz-pk2@3x.png'),
						title: '费用低，一次投入N年受用'
					},
					{
						imgUrl: require('./img/qdhz-pk3@3x.png'),
						title: '智慧展厅无人店提升品牌档次'
					},
					{
						imgUrl: require('./img/qdhz-pk4@3x.png'),
						title: '精准营销转化率高'
					},
					{
						imgUrl: require('./img/qdhz-pk5@3x.png'),
						title: '省时、省力、省钱'
					}
				]
			}
		},
		mounted(){
			setTimeout(() => {                   
			    this._initScroll();
			}, 20);
		},
		methods: {
			_initScroll(){
                let itemWidth = 3.25;
                let margin = 0.2;
                let agencyLen = this.agencyList.length;
                let agencyWidth = (itemWidth + margin)*agencyLen - margin;
                this.$refs.agencyList.style.width = `${agencyWidth}rem`;

                let jishuLen = this.jishuList.length;
                let jishuWidth = (itemWidth + margin)*jishuLen - margin;
                this.$refs.jishuList.style.width = `${jishuWidth}rem`;

                this.$nextTick(() => {
                    if(!this.box2Scroll1){
                        this.box2Scroll1 = new BScroll(this.$refs.box2, {
                           	scrollX: true,
							scrollY: false,
							click: true,
                            eventPassthrough: 'vertical'  //X轴滚动的时候禁止Y轴滚动
                        });
                    }else{
                        this.box2Scroll1.refresh();
                    }

                    if(!this.box3Scroll1){
                        this.box3Scroll1 = new BScroll(this.$refs.box3, {
                           	scrollX: true,
							scrollY: false,
							click: true,
                            eventPassthrough: 'vertical'  //X轴滚动的时候禁止Y轴滚动
                        });
                    }else{
                        this.box3Scroll1.refresh();
                    }
                });
	        },
			handleClick(){
				this.$router.push('/agent');
			}
		},
	}
</script>

<style lang="stylus" scoped>
	.channelCooperation{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #fff;
		overflow: hidden;
		.banner{
			width: 100%;
			height: 5rem;
			background: url('./img/qdhz-banner@3x.jpg') no-repeat;
			background-size: 100% 100%; 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			h1{
				font-size: 0.38rem;
				color: #FFFFFF;
				margin-bottom: 0.3rem;
				margin-top: 0.6rem;
			}
			p{
				font-size: 0.24rem;
				color: #CCCCCC;
				margin-bottom: 0.4rem;
			}
			span{
				width: 2.64rem;
				height: 0.8rem;
				line-height: 0.8rem;
				background: #3BAEFC;
				border-radius: 0.1rem;
				font-size: 0.3rem;
				color: #F3F6FB;
				text-align: center;
			}
		}
		.container{
			width: 100%;
			padding: 0.4rem 0;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			background: #F3F6FB;
			.con{
				display: flex;
				flex-direction: column;
				margin: 0 4% 0.6rem 4%;
				&.con2{
					margin: 0 0 0.6rem 4%;
				}
				&.con3{
					margin: 0 0 0.6rem 4%;
				}
				h2{
					font-size: 0.36rem;
					color: #333;
					margin-bottom: 0.4rem;
				}
				.box1{
					width: 100%;
					height: 1.91rem;
					border-radius: 0.1rem;
					background: #fff;
					position: relative;
					.dashed{
						height: 0.86rem;
						border-bottom: #d8d8d8 dashed 1px;
					}
					.process{
						width: 96%;
						padding: 0 2%;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						position: absolute;
						top: 0.56rem;
						.item{
							width: 1rem;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							img{
								width: 0.6rem;
								height: 0.6rem;
								margin-bottom: 0.2rem;
							}
							span{
								font-size: 0.2rem;
								color: #999;
							}
						}
					}
				}
				.box2{
					width: 100%;
					overflow: hidden;
					.agency-list{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						.item{
							width: 3.25rem;
							height: 3rem;
							background: #fff;
							border-radius: 0.1rem;
							display: flex;
							flex-direction: column;
							// justify-content: center;
							align-items: center;
							margin-right: 0.2rem;
							&:last-child{
								margin-right: 0;
							}
							img{
								width: 0.7rem;
								height: 0.7rem;
								margin-top: 0.3rem;
							}
							h3{
								font-size: 0.26rem;
								color: #333;
								margin: 0.2rem 0;
							}
							p{
								width: 90%;
								font-size: 0.2rem;
								color: #999;
								line-height: 1.5;
								text-align: center;
							}
						}
					}
				}
				.box3{
					width: 100%;
					overflow: hidden;
					.jishu-list{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						.item{
							width: 3.25rem;
							height: 3rem;
							background: #fff;
							border-radius: 0.1rem;
							display: flex;
							flex-direction: column;
							// justify-content: center;
							align-items: center;
							margin-right: 0.2rem;
							&:last-child{
								margin-right: 0;
							}
							img{
								width: 0.7rem;
								height: 0.7rem;
								margin: 0.6rem 0 0.5rem 0;
							}
							h3{
								width: 70%;
								text-align: center;
								font-size: 0.26rem;
								color: #333;
								line-height: 1.5;
							}
						}
					}
				}
				.box4{
					width: 90%;
					overflow: hidden;
					background: #fff;
					border-radius: 0.1rem;
					padding: 5%;
					p{
						text-indent: 0.6rem;
						font-size: 0.3rem;
						color: #999;
						line-height: 0.5rem;
					}
				}
			}
		}
	}
</style>